<!DOCTYPE HTML>
<html>

<head>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, 
     user-scalable=0;" />
    <title>计算器</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    .table {
        text-align: center;
    }

    .btn {
        height: 50px;
        width: 200px;
        margin: 0px;
    }

    .one {
        width: 801.5px;
        height: 50px;
    }

</style>

<body>
    <div class="table">
        <table>
            <td colspan="4"><input class="one" id="text" type="text" value="" /></td>
            <tr>
                <td><input class="btn" type="button" value="(" style="color: red;" /></td>
                <td><input class="btn" type="button" value=")" style="color: red;" /></td>
                <td><input class="btn" type="button" value="%" style="color: red;" /></td>
                <td><input class="btn" type="button" value="C" /></td>
            </tr>
            <tr>
                <td><input class="btn" type="button" value="7" /></td>
                <td><input class="btn" type="button" value="8" /></td>
                <td><input class="btn" type="button" value="9" /></td>
                <td><input class="btn" type="button" value="÷" style="color: red;" /></td>
            </tr>
            <tr>
                <td><input class="btn" type="button" value="4" /></td>
                <td><input class="btn" type="button" value="5" /></td>
                <td><input class="btn" type="button" value="6" /></td>
                <td><input class="btn" type="button" value="x" style="color: red;" /></td>
            </tr>
            <tr>
                <td><input class="btn" type="button" value="1" /></td>
                <td><input class="btn" type="button" value="2" /></td>
                <td><input class="btn" type="button" value="3" /></td>
                <td><input class="btn" type="button" value="-" style="color: red;" /></td>
            </tr>
            <tr>
                <td><input class="btn" type="button" value="0" /></td>
                <td><input class="btn" type="button" value="." style="color: red;" /></td>
                <td><input class="btn" type="button" value="=" style="color: red;" /></td>
                <td><input class="btn" type="button" value="+" style="color: red;font-weight: bold;" /></td>
            </tr>
        </table>
    </div>
    <script>
        // 输入值
        var input = []
        // 计算结果
        function calcResult() {
            var numList = []
            var sum = 0
            for (var index = 0; index < input.length; index++) {
                var element = input[index]
                if (element.type === 'num') {
                    numList.push(element.value)
                } else {
                    if (element.value === '+') {

                    } else if (element.value === '-') {
                        var indexRight = index + 1
                        input[indexRight].value = -input[indexRight].value
                    } else if (element.value === 'x') {
                        var indexRight = index + 1
                        var rightValue = input[indexRight].value
                        var leftValue = numList[numList.length - 1]
                        var newValue = leftValue * rightValue
                        numList[numList.length - 1] = newValue
                        input[indexRight].value = 0
                    } else if (element.value === '÷') {
                        var indexRight = index + 1
                        var rightValue = input[indexRight].value
                        var leftValue = numList[numList.length - 1]
                        var newValue = leftValue / rightValue
                        numList[numList.length - 1] = newValue
                        input[indexRight].value = 0
                    } else if (element.value === '%') {
                        var leftValue = numList[numList.length - 1]
                        var newValue = leftValue / 100
                        numList[numList.length - 1] = newValue
                    } else if (element.value === '.') {
                        var indexRight = index + 1
                        var rightValue = input[indexRight].value
                        var leftValue = numList[numList.length - 1]
                        var newValue = leftValue + (rightValue / (Math.pow(10, rightValue.toString().length)))
                        numList[numList.length - 1] = newValue
                        input[indexRight].value = 0
                    }
                }
            }
            console.log(numList);
            for (var index2 = 0; index2 < numList.length; index2++) {
                sum = sum + numList[index2]
            }
            console.log(sum)
            var showText = document.getElementById('text')
            showText.value = showText.value + sum
        }
        // 判断是否是运算符
        function isOperator(params) {
            var numValue = Number(params)
            if (isNaN(numValue)) {
                return true
            } else {
                return false
            }
        }
        // 初始化点击
        // 获取文档中 class="btn" 的所有元素:
        var btns = document.querySelectorAll('.btn')
        for (var index = 0; index < btns.length; index++) {
            var element = btns[index];
            // 每个输入值点击事件
            element.onclick = function (e) {
                var btnValue = e.target.value
                var showText = document.getElementById('text')
                showText.value = showText.value + btnValue
                // console.log(btnValue)
                var checkOperator = isOperator(btnValue)
                // console.log(checkOperator)
                if (btnValue == '.') {
                    input.push({
                        value: btnValue,
                        type: 'point'
                    })
                } else if (checkOperator) {
                    if (btnValue != '=') {
                        input.push({
                            value: btnValue,
                            type: 'operator'
                        })
                    }
                } else {
                    if (input.length == 0) {
                        input.push({
                            value: Number(btnValue),
                            type: 'num'
                        })
                    } else {
                        var lastValue = input[input.length - 1]
                        if (lastValue.type == 'num') {
                            var lastNum = lastValue.value
                            input[input.length - 1] = {
                                value: lastNum * 10 + Number(btnValue),
                                type: 'num'
                            }
                        } else {
                            input.push({
                                value: Number(btnValue),
                                type: 'num'
                            })
                        }
                        // console.log(lastValue)
                    }
                }
                // console.log(input)
                if (btnValue == '=') {
                    calcResult()
                } else if (btnValue == 'C') {
                    input = []
                    showText.value = ''
                }
            }
        }

    </script>
</body>

</html>
